<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
      .active {
        color: white;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button @click="num++">{{num}}</button>
      <hr />
      <button @click="page=page==1?1:page-1">上一页</button>
      <button v-for="x in 5" :class="{active:x==page}" @click="page=x">
        {{x}}
      </button>
      <button @click="page=page==5?5:page+1">下一页</button>
      <hr />
      <input type="text" v-model="userName" />
      <hr />
      <!-- 组件式开发   从其他地方传入的数据 想要得知是否发生变化 -->
    </div>
  </body>
  <script>
    let app = Vue.createApp({
      data() {
        return {
          num: 100,
          page: 1,
          userName: "张三",
        };
      },
      methods: {
        getList() {
          console.log("请求第", this.page, "页数据");
        },
      },
      // created() {
      //   this.getList();
      // },
      // 数据监听
      watch: {
        num(newVal, oldVal) {
          console.log(newVal);
        },
        page: {
          immediate: true, //初始执行一次
          // 变化之后执行的函数
          handler() {
            this.getList();
          },
        },
        userName(newVal) {
          console.log(newVal);
        },
      },
    });

    // mounted  beforeUnmount
    app = app.mount("#app");
  </script>
</html>
